<template>
  <div class="article-list">

    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <van-swipe-cell :disabled="disableSwiper" v-for="(item) in articlelist" :key="item.id">
        <van-cell center @click="$router.push(`/show?id=${item.id}`)">
          <h3 slot="title" class="list-title">{{item.title}}</h3>
          <div slot="label" class="list-desc">
            <p>
              {{ item.description }}
            </p>
            <p class="desc">
              <span><van-icon name="eye" />收藏({{item.lovenum}})</span>
              <span><van-icon name="good-job" />点赞({{item.click}})</span>
            </p>
          </div>
          <img class="list-img" :src="'http://124.223.14.236:8060/'+item.pic
        " alt="" />
        </van-cell>
        <template #right>
          <!-- <van-button square type="danger" text="取消" /> -->
          <slot :id="item.id" name="rights"></slot>
        </template>
      </van-swipe-cell>
    </van-list>
  </div>
</template>

<script>
import { getcatedetail } from '@/api/cate';
import { getmyarticle,getmycollect,getmylike } from '@/api/userinfo'

export default {
  name: 'ArticleList',
  props: {
    // 是否禁止滑动
    disableSwiper: {
      type: Boolean,
      default: true
    },
    // 文章列表
    listid: {
      type: String,
      default: null
    },

  },
  data () {
    return {
      articlelist: [],
      loading: false,
      finished: false,
      params: {
        cateid: '',
        page: 1,
        limit: 20
      }
    }
  },
  methods: {
    async onLoad () {
      console.log(this.$router.currentRoute.path);
      // 异步更新数据
      if (this.listid) {
        this.params.cateid = this.listid
        const res = await getcatedetail(this.params)
        console.log(res);
        this.articlelist = res.data.list.data

        //   // 加载状态结束
        this.loading = false;
        this.params.page++

        //   // 数据全部加载完成
        if (this.params.page >= res.data.list.totalPages) {
          this.finished = true;
        }
      } else if (this.$router.currentRoute.path === '/user/article') {
        delete this.params.cateid
        const res = await getmyarticle(this.params)
        console.log(res);
        this.articlelist = res.data.data
        //   // 加载状态结束
        this.loading = false;
        this.params.page++

        //   // 数据全部加载完成
        if (this.params.page >= res.data.totalPages) {
          this.finished = true;
        }

      }else if(this.$router.currentRoute.path === '/user/sc'){
        delete this.params.cateid
        const res = await getmycollect(this.params)
    console.log(res);
    this.articlelist = res.data.list.data
       //   // 加载状态结束
       this.loading = false;
        this.params.page++

        //   // 数据全部加载完成
        if (this.articlelist.length >= res.data.list.count) {
          this.finished = true;
        }
      }
      else{
        delete this.params.cateid
        const res = await getmylike(this.params)
    console.log(res);
    this.articlelist = res.data.list.data
   //   // 加载状态结束
   this.loading = false;
        this.params.page++
        //   // 数据全部加载完成
        if (this.articlelist.length >= res.data.list.count) {
          this.finished = true;
        }
      }
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      // setTimeout(() => {
      //   for (let i = 0; i < 10; i++) {
      //     this.list.push(this.list.length + 1);
      //   }

      // }, 1000);
    },
  }
}
</script>
<style scoped lang="less">
.article-list {
  margin-top: 10px;
  .list-title {
    font-size: 32px;
    color: #222;
    font-weight: normal;
  }
  .list-desc {
    font-size: 28px;
    .desc {
      color: #aaa;
      font-size: 24px;
      span {
        margin-right: 20px;
      }
    }
  }
  /deep/ .van-swipe-cell__value {
    width: 260px;
    flex: unset;
  }
  .list-img {
    width: 240px;
  }
  /deep/ .van-swipe-cell__right {
    .van-button {
      height: 100%;
    }
  }
}
</style>